<template>
  <div class="home-footer">
    <van-tabs
      :title-inactive-color="'white'"
      :title-active-color="'white'"
      @click="onClick"
    >
      <van-tab v-for="item in title" :key="item.id" :name="item.data">
        <template #title>
          <span class="name">{{ item.name }}</span>
          <span class="tip">{{ item.tip }} </span>
        </template>
        <div class="home-footer-products">
          <div class="home-footer-product" v-for="item in list" :key="item.id">
            <div class="home-footer-img">
              <img :src="item.pic" alt="图片加载失败" />
            </div>
            <div class="home-footer-label">
              <h3 class="home-footer-title">
                <span></span>
                {{ item.dtitle }}
              </h3>
              <div class="home-footer-price">
                券后 <span class="rmb">¥</span
                ><span class="price">{{ item.jiage }}</span>
              </div>
              <div class="home-footer-info">
                <span class="info-label1" v-if="item.labelOne">
                  {{ item.labelOne }}
                </span>
                <span class="info-label2" v-if="item.labelTwo">
                  {{ item.labelTwo }}
                </span>
                <span class="info-quan" v-if="item.quanJine"
                  ><span>券</span>{{ item.quanJine }}元</span
                >
              </div>
              <div class="home-footer-sales">
                已抢{{
                  item.xiaoliang > 10000
                    ? parseInt(item.xiaoliang / 1000) / 10 + "万"
                    : item.xiaoliang
                }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const footerList = computed(() => store.state.home.footerList);
    const footerList2 = computed(() => store.state.home.footerList2);
    const state: {
      [key: string]: any;
    } = reactive({
      title: [
        {
          name: "发现",
          id: 1,
          tip: "推荐好货",
          data: "find",
        },
        {
          name: "精选",
          id: 2,
          tip: "猜你喜欢",
          data: "choose",
        },
      ],
      list: [],
    });
    const onClick = (name: string): void => {
      if (name == "find") {
        state.list = footerList;
      } else if (name == "choose") {
        state.list = footerList2;
      }
    };
    onMounted(() => {
      state.list = footerList;
      store.dispatch({
        type: "home/getChooseList",
      });
    });
    return {
      ...toRefs(state),
      onClick,
    };
  },
});
</script>
<style lang="stylus" scoped>
.home-footer
    font-size .12rem
    margin-top .1rem
    position relative
    /deep/ .van-tabs__wrap
      position sticky
      top 0
      z-index 99
    /deep/.van-tabs__nav
        background  #ff7c0d
        height .4rem
        position relative
        &::after
            content ""
            background-color white
            font-weight bold
            width 1px
            height .32rem
            position absolute
            left 50%
            top 50%
            transform translateY(-80%)
        .van-tabs__line
            display none
        .van-tab
            .van-tab__text
                display flex
                flex-direction column
                justify-content center
                text-align center
                .name
                    font-size .18rem
                    margin-bottom .02rem
                .tip
                    width .65rem
                    height .16rem
                    border-radius .08rem
                    line-height .16rem
                    font-size .12rem
            &.van-tab--active
                .tip
                    color #ff7c0d
                    background white
    .home-footer-products
        display flex
        flex-wrap wrap
        justify-content space-between
        .home-footer-product
            margin-top .1rem
            border-radius .05rem
            overflow hidden
            background white
            width 1.73rem
            .home-footer-img
                width 1.73rem
                height 1.73rem
                img
                  width 100%
                  height 100%
            .home-footer-label
                padding .1rem
                .home-footer-title
                    margin 0
                    font-weight normal
                    font-size .12rem
                    height 0.32rem
                    span
                        min-width .23rem
                        height .13rem
                        border-radius 2px
                        background-image url(https://img.alicdn.com/imgextra/i1/2053469401/O1CN01o1MI292JJhz37UySP_!!2053469401.png)
                        display inline-block
                        margin-right 3px
                        background-size 100%
                        background-repeat no-repeat
                        background-position center
                        position relative
                        z-index 1
                        zoom 1
                        top 2px
                .home-footer-price
                    color #666666
                    .rmb
                        color #ff2b22
                    .price
                        color #ff2b22
                        font-size .19rem
                .home-footer-info
                    margin .02rem 0
                    .info-label1
                        height .12rem
                        border-radius .02rem
                        border 1px solid
                        font-size .095rem
                        font-weight 400
                        color #ff0137
                        padding 0 .03rem
                        margin-right .05rem
                        display inline-block
                        line-height .12rem
                        vertical-align middle
                        border-color rgba(255,1,55,.55)
                    .info-label2
                        height .12rem
                        border-radius .02rem
                        border 1px solid
                        font-size .095rem
                        font-weight 400
                        padding 0 .03rem
                        margin-right .05rem
                        display inline-block
                        line-height .12rem
                        vertical-align middle
                        border-color rgba(245,114,36,.7)
                        color #F57223
                    .info-quan
                        height .14rem
                        background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
                        border-radius .02rem
                        padding 0 .05rem 0 .01rem
                        font-size .095rem
                        font-weight 400
                        color #fff
                        line-height .14rem
                        display inline-block
                        position relative
                        z-index 1
                        zoom 1
                        top 0
                        vertical-align middle
                        span
                            background #fff
                            border-radius 1px 0 0 1px
                            font-size .1rem
                            color #FE3A33
                            margin auto 5px auto 0
                            min-width .12rem
                            max-width .12rem
                            min-height .12rem
                            max-height .12rem
                            display inline-block
                            line-height .12rem
                            text-align center
                            vertical-align middle
                .home-footer-sales
                    color #888888
</style>
